<template>
  <div>
    <el-table
      :data="productData"
      border
      style="width: 100%">
      <el-table-column
        prop="productName"
        label="产品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价"
        width="180">
      </el-table-column>
      <el-table-column
        label="数量">
        <template v-slot="">
          <el-input-number v-model="num" :min="1" :max="10" label="描述文字" size="mini"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="总价"
        width="180">
        {{sumPrice}}
      </el-table-column>
      <el-table-column
        prop="sumPrice"
        label="总价"
        width="180">
        <el-button @click.native="submit">
          提交订单
        </el-button>
      </el-table-column>
      
    </el-table>
  </div>
</template>

<script>
import * as vipApi from "../../../api/vip"
export default {
  data(){
    return{
      productData:[],
      num:1,
    }
  },
  created(){
    this.productData[0]=JSON.parse(localStorage.getItem("vip-row"))
  },
  methods: {
    
    submit(){
      let {product_id}=JSON.parse(localStorage.getItem('vip-row'))
      console.log(product_id,this.num)
      vipApi.getPreorderApi(product_id,this.num)
      .then(res=>{
        console.log(res)
        if(res.data.state){
          localStorage.setItem("order_id",res.data.order_id)
          this.$router.push({name:"pay"})
        }
      })
    }
  },
  computed:{
    sumPrice(){
      return this.productData[0].price*this.num
    }
  }
}
</script>